<template>
<view class="wallet">
	<view style="width: 100%; height: calc( 100% - 280upx ); display: flex; flex-direction: column; justify-content: center; align-items: center;">
		<view style="text-align: center;">
			<view style="font-size: 80upx; color: #FFF;">{{ info.wallet }}</view>
			<view style="font-size: 30upx; color: #FFF; margin-top: 50upx;">总余额(元)</view>
			<view style="width: 300upx; height: 95upx; line-height: 95upx; background-color: #FFF; box-shadow: 0px 3upx 17upx 1upx rgba(246, 129, 66, 0.22); border-radius: 48upx;
				margin-top: 120upx;text-align: center; color: #f57e40; font-weight: bold; font-size: 30upx;" @click="turnTo('chongzhi')">充值余额</view>
		</view>
	</view>	
	<view class="wallet_bottom">
		<view style="width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
			<view style="margin-left: 52upx;">
				<view style="font-size: 36upx; font-weight: bold; color: #e97b41;">{{ info.deposit == 0 ? '您未缴纳押金' : ('押金：￥' + info.deposit) }}</view>
				<view style="font-size: 24upx; color: #cdcdcd; margin-top: 12upx;">使用完成后，可随时提现押金</view>
			</view>
			<view style="width: 200upx; height: 60upx; line-height: 60upx; background-color: #ef7738; border-radius: 30upx; text-align: center; color: #FFF;
				font-size: 30upx; font-weight: bold; margin-right: 54upx;" @click="clickYajin" v-if="showBtn">{{ info.deposit == 0 ? '缴纳押金' : '退回押金' }}</view>
		</view>
	</view>
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			info: {
				wallet: 0,
				deposit: 0,
				depositFree: false
			},
			showBtn: false,
		}
	},
	methods: {
		turnTo(name) { uni.navigateTo({ url: name }); },
		clickYajin() {
			if ( this.info.deposit > 0 ) {
				this.turnTo('yajintuihui');
			} else {
				this.turnTo('yajin');				
			}
		}
	},
	onShow() {			
		http.request({
			url: `borrow/myWallet?a=a`,
			method: 'get',
			success: (res)=>{		
				console.log(res,'钱包');
				this.info=res.dataList||{};
				this.showBtn = true;
			}
		});
	}
}
</script>


<style>
.wallet {
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(-172deg, #e4814d, #ef7738, #f88446);
}
.wallet .top-box-title {
	height: 70upx;
	line-height: 70upx;
	position: absolute;
	top: 50upx;
	left: 0;
	color: #FFFFFF;
	font-size: 34upx;
	z-index: 10;
}
.wallet_bottom {
	width: 100%;
	height: 260upx;
	background: #FFF;
	box-sizing: border-box;
	box-shadow: 0upx -3upx 17upx 1upx rgba(246, 129, 66, 0.22);
	border-radius: 30upx 30upx 0upx 0upx;
	position: absolute;
	left: 0;
	bottom: 0;
}
</style>